<template>
	<view class="page has-fixed-footer">
		<page-header :showPlaceHolder="false" :showTitle="false"></page-header>
		<!-- 内容 -->
		<view class="content">
			<view class="title">
				{{store.getters.userType == '2' ? '供应商认证':'供应链认证'}}
			</view>
			<view class="prompt">
				{{store.getters.userType == '2' ? '完善以下资料，通过供应商认证':'完善以下资料，通过供应链认证'}}
			</view>
			<fui-steps :items="items" :fontWeight="550" :isMark="false" :current="current" :size="24" direction="row"
				:isWait="true" :lineThrough="true" color="#999999" nodeColor="#999999"></fui-steps>
			<fui-section descrColor="#666666" title="法人认证" isLine color="#333333" lineWidth="4px"
				marginTop="30"></fui-section>
			<view style="display: flex; justify-content: space-between; padding: 20rpx;">
				<upload-image size="small" type="front" :defaultList="form.idcFront ? [form.idcFront] : []" @uploaded="uploadedCardFront"></upload-image>
				<upload-image size="small" type="back" :defaultList="form.idcBack ? [form.idcBack] : []" @uploaded="uploadedCardBack"></upload-image>
			</view>
			<view class="fui-wrap" v-if="form.corporationIdCard">
				<fui-form ref="formRef" :model="form" :top="store.getters.statusBarHeight">
					<fui-form-item label="法人姓名"  labelWeight="600" labelWidth="200" :left="0" labelSize="28" prop="corporationName">
						<fui-input  :borderBottom="false" color="#333333" size="28" :padding="[0]" placeholder="请输入法人姓名"
							v-model="form.corporationName"></fui-input>
					</fui-form-item>
					<fui-form-item label="法人身份证号" labelWeight="600" labelWidth="200" :left="0" labelSize="28"
						prop="corporationIdCard">
						<fui-input disabled :borderBottom="false" color="#333333" size="28" :padding="[0]"
							placeholder="请输入法人身份证号" v-model="form.corporationIdCard"></fui-input>
					</fui-form-item>
					<fui-form-item label="法人联系方式" labelWeight="600" :left="0" labelWidth="200" labelSize="28"
						prop="corporationPhone">
						<fui-input :borderBottom="false" color="#333333" size="28" :padding="[0]"
							placeholder="请输入法人联系方式" v-model="form.corporationPhone"></fui-input>
					</fui-form-item>
				</fui-form>
				<view class="login-agreement">
					<fui-label>
						<fui-checkbox :scaleRatio="0.6" :checked="form.isSamePerson" @change="change"></fui-checkbox>
						<fui-text text="负责人与法人为同一人" size="24" color="var(--fui-color-primary)"></fui-text>
					</fui-label>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="ui-fixed-footer ui-fixed-footer__white">
			<fui-button :disabled="!form.corporationIdCard" height="78rpx" :margin="['394rpx','0','0','0 ']"
				disabledBackground="#DFDFDF" disabledColor="#666666" background="var(--fui-color-primary)" bold
				@click="submit">实名认证</fui-button>
		</view>

		<!-- 提示窗口 -->
		<fui-toast ref="toastRef">
			<view class="fui-toast__custom">
				<view class="toast">
					<image src="../../static/images/error.png" mode=""></image>
				</view>
				<view class="fui-toast__txt">您上传的营业执照上的法人姓名</view>
				<view class="fui-toast__txt">
					与身份证上姓名不一致，请重新提交！
				</view>
			</view>
		</fui-toast>
	</view>
</template>

<script setup>
import { ref, computed, inject } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useStore } from 'vuex'
import pageHeader from '@/components/header'
import uploadImage from '@/components/upload/image'
import systemApi from '@/api/system'
import supplierApi from '@/api/supplier'

const tab = inject('$tab')
const modal = inject('$modal')
const store = useStore()

// 步骤条
const current = ref(1)
const items = ref([{
	title: '公司认证',
	text: '1'
}, {
	title: '法人认证',
	text: '2'
}, {
	title: '负责人认证',
	text: '3'
}])

// 表单
const form = ref({
	idcFront: '',
	idcBack: '',
	corporationName: '',
	corporationIdCard: '',
	corporationPhone: '',
	isSamePerson: false, // 是否和负责人为同一人
})
const formRef = ref(null)
const rules = ref([
	{
		name: 'corporationName',
		rule: ['required', 'minLength:2'],
		msg: ['请输入法人姓名', '姓名必须2个或以上字符']
	}, {
		name: 'corporationIdCard',
		rule: ['required', 'isIdCard'],
		msg: ['请输入法人身份证号', '请输入正确的法人身份证号']
	}, {
		name: 'corporationPhone',
		rule: ['required', 'isMobile'],
		msg: ['请输入法人联系方式', '请输入正确的手机号码']
	}
])

onLoad(() => {
	getCompanyDetail()
	getAdminDetail()
})

// 获取公司信息
const companyApiUrl = computed(() => {
	let apiUrl = ''
  if (store.getters.userType === '1') apiUrl = 'getSupplyDetail'
  if (store.getters.userType === '2') apiUrl = 'getSupplierDetail'
  return apiUrl
})
const getCompanyDetail = () => {
	supplierApi[companyApiUrl.value](store.getters.companyId, store.getters.currentDeptId).then((res) => {
		if (res.code == 0 && res.data.info) res.data = res.data.info
		if (res.data) {
			Object.keys(form.value).forEach((key) => {
				form.value[key] = res.data[key]
			})
			form.value.isSamePerson = !!res.data.isSamePerson
		}
	})
}

// 获取负责人信息
const adminInfo = ref({
	adminName: '',
	adminPhone: ''
})
const adminApiUrl = computed(() => {
	let apiUrl = ''
  if (store.getters.userType === '1') apiUrl = 'getSupplyAdminDetail'
  if (store.getters.userType === '2') apiUrl = 'getSupplierAdminDetail'
  return apiUrl
})
const getAdminDetail = () => {
	supplierApi[adminApiUrl.value](store.getters.companyId).then((res) => {
		if (res.code == 0 && res.data) {
			Object.keys(adminInfo.value).forEach((key) => {
				adminInfo.value[key] = res.data[key]
			})
		}
	})
}

// 上传
const uploadedCardFront = async (e) => {
	if (e[0]) {
		try {
			modal.loading()
			const res = await systemApi.uploadidcard({
				imageUrl: e[0]
			})
			modal.closeLoading()
			form.value.idcFront = e[0]
			if (res.code == 0) {
				let obj = JSON.parse(res.data)
				form.value.corporationName = obj['姓名']
				form.value.corporationIdCard = obj['公民身份号码']
			}
		} catch (err) {
			modal.closeLoading()
			modal.msgError('读取错误，请确认上传正确的身份证件！')
		}
	}
}
const uploadedCardBack = async (e) => {
	if (e[0]) {
		form.value.idcBack = e[0]
	}
}

const change = ((value) => {
	form.value.isSamePerson = value.checked
	if (form.value.isSamePerson) {
		modal.msg('勾选此项，法人信息须与邀约时负责人信息保持一致！')
	}
})

// 下一步
const businessForm = uni.getStorageSync('business')
const toastRef = ref('')
const submit = (async () => {
	if (!form.value.idcFront) {
		modal.msgError('请上传法人身份证正面照片！')
		return
	}
	if (!form.value.idcBack) {
		modal.msgError('请上传法人身份证反面照片！')
		return
	}

	const validRes = await formRef.value.validator(form.value, rules.value)
	if (validRes.isPassed) {
		if (businessForm.corporationName != form.value.corporationName){
			let obj = {}
			toastRef.value.show(obj)
			return
		}
		if (form.value.isSamePerson && (form.value.corporationName !== adminInfo.value.adminName || form.value.corporationPhone !== adminInfo.value.adminPhone)) {
			modal.msgError('法人信息请与邀约时负责人信息保持一致！')
			return
		}
		uni.setStorageSync('LegalPerson', form.value)
		tab.navigateTo(`/pages/authentication/Authentication?img=${form.value.idcFront}`)
		// tab.navigateTo('/pages/authentication/Head')
	}
})
</script>

<style lang="scss" scoped>
.page {
	min-height: 100%;
	position: relative;

	.content {
		margin: 36rpx;

		.title {
			font-size: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.prompt {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #999999;
			margin-top: 20rpx;
		}

		.login-agreement {
			display: flex;
			align-items: center;
			margin-top: 30rpx;

			.fui-label__box {
				display: flex;
				align-items: center;

				.fui-checkbox__input {
					margin-right: 12rpx;
				}
			}
		}

		::v-deep.fui-steps__wrap {
			margin: 60rpx auto;
		}

		::v-deep.fui-sections__wrap {
			padding: 0 !important;
		}

		:deep(.fui-form__msg-wrap) {
			z-index: 11000;
		}

		::v-deep.fui-form__wrap-inner {
			padding: 0 !important;
		}

		::v-deep.uni-input-input {
			font-weight: bold;
		}

		.ask {
			width: 100%;
			padding: 22rpx 20rpx 24rpx 28rpx;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			background-color: #fff3e4;
			box-sizing: border-box;

			.ask-title {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.ask-content {
				margin-top: 16rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #999999;

				text {
					color: #f95a5a;
				}
			}
		}

		::v-deep.textarea-box .fui-form__wrap-inner {
			display: initial !important;
		}

		.cycle-box {
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			.cycle {
				width: 160rpx;
				height: 64rpx;
				background: #f5f7fe;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				opacity: 1;
				border: 2rpx solid #e7ebfb;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #333333;
				text-align: center;
				line-height: 64rpx;
				margin-right: 20rpx;
				position: relative;
			}

			.cycle-active {
				font-weight: bold;
				color: var(--fui-color-primary);
				border: 2rpx solid var(--fui-color-primary);
			}

			.cycleimg {
				width: 30rpx;
				height: 27rpx;
				display: block;
				position: absolute;
				right: 0;
				bottom: 0;
			}
		}
	}

	.fui-toast__custom {
		width: 594rpx;
		height: 352rpx;
		padding: 42rpx 18rpx 0 18rpx;
		box-sizing: border-box;

		.toast {
			width: 128rpx;
			height: 128rpx;
			margin: 0 auto;
			background-color: #FFFFFF;
			border-radius: 50%;
			margin-bottom: 42rpx;
			image {
				width: 100%;
				height: 100%;
				display: block;
			}
		}

		.fui-toast__txt {
			font-size: 32rpx;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			padding-bottom: 8rpx;
		}
		
	}
}
</style>